
import React, { Component } from 'react'

// 引入动画库
import { CSSTransition } from 'react-transition-group'
// 引入动画样式
import './assets/animate.min.css'


class App2 extends Component {

  state = {
    isShow: true
  }

  handleShoworHide = () => {
    this.setState(state => {
      return {
        isShow: !state.isShow
      }
    })
  }

  render() {
    return (
      <div>
        <CSSTransition
          in={this.state.isShow}
          timeout={600}
          classNames={{
            enter: 'animate__animated',
            enterActive: 'animate__fadeIn',
            exit: 'animate__animated',
            exitActive: 'animate__fadeOut'
          }}
          unmountOnExit
        >
          <h3>你好世界</h3>
        </CSSTransition>
        <button onClick={this.handleShoworHide}>隐藏或显示</button>
      </div >
    )
  }
}

export default App2;
